import React from "react";

const ContainerDemo: React.FC = () => {
  return (
    <div className="bg-gray-600 min-h-screen py-8">
      <h1 className="text-3xl font-bold text-center mb-8">
        Tailwind CSS Container Demo
      </h1>
      <div className="container mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
        <div className="bg-blue-500 text-white p-4">
          <h2 className="text-xl font-semibold">This is a container</h2>
          <p>The container class sets a max-width and centers the content</p>
        </div>

        <div className="p-6 bg-yellow-600">
          <h3 className="text-lg font-semibold mb-4">Container Behavior:</h3>
          <ul className="list-disc list-inside space-y-2">
            <li>By default, it has a max-width and is centered</li>
            <li>On smaller screens, it takes up full width</li>
            <li>On larger screens, it has margins on the sides</li>
          </ul>
        </div>

        <div className="bg-gray-500 p-6">
          <h3 className="text-lg font-semibold mb-4">Responsive Behavior:</h3>
          <div className="space-y-4 bg-yellow-300">
            {/**不同分辨率下, 显示不同的文本 
             * sm: max-width 640px
             * md: max-width 768px
             * lg: max-width 1024px
             * xl: max-width 1280px
             * 2xl: max-width 1536px
            */}
            <div className="bg-red-400 p-4 rounded-3xl">
              <p className="sm:hidden">Default (Full width on mobile)</p>
              <p className="hidden sm:block md:hidden">sm: max-width 640px</p>
              <p className="hidden md:block lg:hidden">md: max-width 768px</p>
              <p className="hidden lg:block xl:hidden">lg: max-width 1024px</p>
              <p className="hidden xl:block 2xl:hidden">xl: max-width 1280px</p>
              <p className="hidden 2xl:block">2xl: max-width 1536px</p>
            </div>
          </div>
        </div>

        <div className="p-6 bg-green-600">
          <h3 className="text-lg font-semibold mb-4">Example Content:</h3>
          <p className="mb-4">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </p>
        </div>
        <div className="mt-28 text-center text-sm text-gray-600 bg-pink-600">
          Resize the browser window to see how the container adapts to different
          screen sizes.
        </div>
      </div>{" "}
      {/* container end */}
    </div>
  );
};

export default ContainerDemo;
